表の枠線を工夫する
通常、表の枠線の太さはborderで指定します。しかし、この方法で描画した枠線は立体的であり、border="1"を指定しても実際には1ピクセル以上の枠線が描画されてしまいます。そこで、今回の講座では少しユニークな枠線の描画方法を紹介します。画像の準備も必要ないため、手軽に利用できるのも利点ですよ!

→ 1ピクセルの細い枠線の表を作成する
 
まずは、1ピクセルの細い枠線の表を作成する方法を紹介します。このような枠線は、表の背景色を指定し、セルとセルの間隔を1ピクセルに指定すると実現できます。たとえば、背景色が黒の表を作成し、「border="0" cellspacing="1"」を指定します。すると、セルとセルの間には表の背景色(黒)が表示されます。これを表の罫線とみなすわけです。なお、この方法で表を作成する場合は、各セルについて必ず背景色を指定する必要があります。そうしないと、表の背景色(黒)がそのまま表示されてしまいます。
<TABLE border="0" bgcolor="#000000" cellspacing="1" cellpadding="3" width="250">
<TR>
  <TD bgcolor="#CCCCCC">size</TD>
  <TD bgcolor="#FFFFFF">文字サイズの指定</TD>
</TR><TR>
  <TD bgcolor="#CCCCCC">color</TD>
  <TD bgcolor="#FFFFFF">文字色の指定</TD>
</TR><TR>
  <TD bgcolor="#CCCCCC">face</TD>
  <TD bgcolor="#FFFFFF">フォントの種類の指定</TD>
</TR>
</TABLE>


→ 外枠がグラデーションの表を作成する
 
次は、外枠がグラデーションの表を作成する方法を解説します。このような表は、TABLEタグを入れ子にし、繰り返し表を作成していくことで実現します。それぞれのTABLEタグには背景色を指定し、同時にcellpaddingで適当な間隔を設けておきます。すると、外側から順に表の背景色がグラデーションとして表示されます。最後に、先ほど紹介した方法で表を作成すると、外枠がグラデーションの表を作成できます。
<TABLE border="0" bgcolor="#FFAA00" cellpadding="3">
<TR><TD>
<TABLE border="0" bgcolor="#FFCC44" cellpadding="3" width="100%">
<TR><TD>
<TABLE border="0" bgcolor="#FFFF88" cellpadding="3" width="100%">
<TR><TD>
<TABLE border="0" bgcolor="#FFCC00" cellpadding="3" cellspacing="1" width="100%">
<TR bgcolor="#FFFFBB">
<TD>CD-ROM</TD><TD>シーディーロム</TD><TD>読み取り専用</TD>
</TR><TR bgcolor="#FFFFBB">
<TD>CD-R</TD><TD>シーディーアール</TD><TD>1回だけ書き込み可能</TD>
</TR><TR bgcolor="#FFFFBB">
<TD>CD-RW</TD><TD>シーディーアールダブリュー</TD><TD>書き換え可能</TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze